<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body{
            background:url(img/login.jpg);
            background-repeat:no-repeat;
            background-size:100% auto;
        }
        #login-box{
            width:30%;
            height:auto;
            margin:0 auto ;
            margin-top:13%;
            text-align:center;
            background:#00000060;
            padding:20px 50px;
        }
        #login-box h1{
            color:#fff;
        }
        #login-box .form .item{
            margin-top:15px;
        }
        #login-box .form .item i{
            font-size:18px;
            color:#fff;
        }
        #login-box .form .item input{
            width:180px;
            font-size:18px;
            border:0;
            border-bottom:2px solid #fff;
            padding:5px 10px;
            background:#ffffff00;
            color:#fff;
        }
        #login-box 	button{
            margin-top:20px;
            width:190px;
            height:30px;
            font-size:20px;
            font-weight:700;
            color:#fff;
            background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
            border:0;
            border-radius:15px;
        }
    </style>
</head>
<body>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<div id="login-box">
    <div class="form">
        <div class="item">
            <i class="fa fa-github-alt" style="font-size:24px"></i>
            <input type="text" placeholder="Username">
        </div>
        <div class="item">
            <i class="fa fa-search" style="font-size:24px"></i>
            <input type="text" placeholder="Password">
        </div>
    </div>
    <button>Login</button>
</div>
<script>
    var vm=new Vue({
        el: '#login-box',
        methods:{
            onlogin(){
                axios({
                    method:"post",
                    url:"http://localhost:80/login",
                    data:this.message
                }).then(function (resp) {
                    if(resp.data.dataType=="message_err"){
                        vm.logFailed=resp.data.content;
                    }else if(resp.data.dataType=="url_index")
                    window.location.href=resp.data.content;
                })
            }
        },
        data: {
            message:{
                account:"",
                password:""
            },
            logFailed:null
        }
    })
</script>
</body>
</html>